<template>
  <div class="content" style="width: 100%;">
    <div class="left">
        <!-- 解码获得图片真正的url地址 -->
        <!-- <img v-if="props.imgUrl" :src="getUrl(props.imgUrl)"  alt="图片加载中"> -->
        <img v-if="props.imgUrl" :src="props.imgUrl"  alt="图片加载中">
        <img v-else src="../assets/images/默认医院.jpg"  alt="图片加载中">
    </div>
    <div class="mid">
      <span class="font-mid1">{{ props.hosname }}</span>
      <!-- <span class="font-mid2">{{ props.introduction }}</span> -->
      <span class="font-mid3">{{ props.address }}</span>
    </div>
    <div class="right">
      <span>擅长：{{ props.excel }}</span>
      <p @click="GotoRegister">立即预约>></p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
import queryString from 'query-string';

const $router=useRouter()
const props=defineProps({
  hosname:{
    type:String
  },
  address:{
    type:String
  },
  imgUrl:{
    type:String
  },
  excel:{
    type:String
  },
  introduction:{
    type:String
  },
  hclass:{
    type:String
  },
  page:{
    type:Number
  },
  pageSize:{
    type:Number
  },
  id:{
    type:Number
  }
})
const GotoRegister=()=>{
  $router.push({
    path:'/register',
    query:{
      // page:props.page,
      // pageSize:props.pageSize,
      id:props.id,
      hclass:props.hclass,
      hospital:props.hosname
    }
  })
}

// 解码获取图片真正的url
// const getUrl=(originalUrl)=>{
//   // 分割为基础url和查询参数
//   const parsed = queryString.parseUrl(originalUrl);

//   // 提取 mediaurl 参数的值
//   const mediaUrlEncoded = parsed.query.mediaurl;

//   // 解码 mediaurl 参数的值
//   const realImageUrl = decodeURIComponent(mediaUrlEncoded);
//   return realImageUrl
// }
</script>

<style lang="scss" scoped>
.content{
  display: flex;
  background-color: #fff;
  margin-top: 20px;
  .left{
    // width: 450px;
    margin-top: 10px;
    img{
      width: 437px;
      height:320px;}
  }
  .mid{
    min-width: 800px;
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    margin-left:10px;
    .font-mid1{
      height: 32px;
      font-size: 40px;
      font-weight: bold;
      margin-top: 20px;
    }
    .font-mid3{
      height: 32px;
      font-size: 24px;
      font-weight: bold;
      margin-top: 200px;
    }
  }
  .right{
    font-size: 26px;
    color: #ada7a7;
    // width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 15px;
    margin-right: 35px;
    p:hover{
      cursor: pointer;
      color: red;
    }
  }
}
</style>
